<template>
	<view>
		<view class="cu-list menu-avatar">

			<view class="cu-item" v-for="item in TeacherList" :key="item.id" @click="$openrul(`/subpackage/chatTeacher/chatTeacher?id=${item.id}`)">
				<view class="cu-avatar radius lg" :style="{ 'background-image': `url(${item.avatar})` }"></view>
				<view class="content">
					<view class="text-pink">
						<view class="text-cut">{{ item.nickname }}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">{{ item.message.content }}</view>
					</view>
				</view>
				<view class="action">
					<view v-if="item.message" class="text-grey text-xs">{{ getMonthAndDate(item.message.timestamp)
					}}</view>
					<!-- <view class="cu-tag round bg-red sm">5</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TeacherList: [],
			modalName: null,
			gridCol: 3,
			gridBorder: false,
			menuBorder: false,
			menuArrow: false,
			menuCard: false,
			skin: false,
			listTouchStart: 0,
			listTouchDirection: null,
		};
	},
	onShow() {
		this.getTeacherList()
	},
	methods: {
		getMonthAndDate(timestamp) {
			const date = new Date(timestamp);
			const month = date.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
			const day = date.getDate();
			return `${month}-${day}`;
		},
		async getTeacherList() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.getTeacherList,
				data: {
				}
			})
			this.TeacherList = res.data
			console.log('this.TeacherList: ', this.TeacherList)
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		Gridchange(e) {
			this.gridCol = e.detail.value
		},
		Gridswitch(e) {
			this.gridBorder = e.detail.value
		},
		MenuBorder(e) {
			this.menuBorder = e.detail.value
		},
		MenuArrow(e) {
			this.menuArrow = e.detail.value
		},
		MenuCard(e) {
			this.menuCard = e.detail.value
		},
		SwitchSex(e) {
			this.skin = e.detail.value
		},

		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target
			} else {
				this.modalName = null
			}
			this.listTouchDirection = null
		}
	}
}
</script>

<style>
.page {
	height: 100Vh;
	width: 100vw;
}

.page.show {
	overflow: hidden;
}

.switch-sex::after {
	content: "\e716";
}

.switch-sex::before {
	content: "\e7a9";
}

.switch-music::after {
	content: "\e66a";
}

.switch-music::before {
	content: "\e6db";
}</style>

